<template>
	<view class="u-m-t-18">
		<view class="bg-white">
			<uni-list :border="false">
			  <uni-list-item link rightText="查看更多规则" @click="$refs.popup.open()">
					<view class="flex" slot="header">
						<text class="font-30 u-p-r-20">拼团规则</text>
					</view>
				</uni-list-item>
			</uni-list>
      <view class="u-p-x-30 u-p-b-20">
        <view class="flex flex-column">
          <text class="font-24 font-weight-bold">1.七天无理由退换</text>
          <text class="font-24 u-p-t-10 text-greey">选择拼团商品下单</text>
        </view>
        <view class="flex flex-column u-p-t-20">
          <text class="font-24 font-weight-bold">2.拼中发货</text>
          <text class="font-24 u-p-t-10 text-greey">参团人数拼团成功，系统规定抽取人，平台发货，拼团商品不支持退换货</text>
        </view>
      </view>
		</view>
		
		<!-- 规格 -->
		<view class="u-m-t-18 bg-white" @click="skuClick">
			<uni-list :border="false">
			  <uni-list-item>
					<view class="flex" slot="header">
						<text class="u-font-24 u-p-r-20">规格参数</text>
						<!-- <text class="u-font-24 text-greey">商品规格，颜色</text> -->
					</view>
				</uni-list-item>
			</uni-list>
		</view>
	
		<view class="u-m-t-18">
      <uni-list :border="false">
        <uni-list-item link rightText="查看更多" @click="$refs.popupGroup.open()">
      		<view class="flex flex-row" slot="header">
      			<text class="u-font-24 u-p-r-20">{{groupTotal}}人正在拼团，可直接参与</text>
      		</view>
      	</uni-list-item>
      </uni-list>
			<view class="u-p-x-30 bg-white" v-if="groupList.length">
				<view class="flex u-p-y-20" v-for="(item,index) in groupList.slice(0,3)" :key="index">
					<image :src="item.avatar" style="width: 80rpx; height: 80rpx; border-radius: 40rpx;"></image>
					<view class="flex-1 flex align-center justify-between u-p-l-20">
						<view class="flex flex-column">
							<text class="font-26">团长：{{item.nickname}}</text>
							<text class="u-m-t-10 font-24 text-greey">{{item.createtime}} 开团</text>
						</view>
						<view class="flex align-center">
							<text class="u-p-r-10 font-26">还差{{item.gap_num}}人</text>
							<view class="text-center bg-warning rounded-5" style="width: 100rpx; height: 50rpx;line-height: 50rpx;" @click="toBuy(item.groups_goods_id, item.id)">
								<text class="font-24 text-center text-white"  style="line-height: 50rpx;">参团</text>
							</view>
						</view>
					</view>
				</view>
			</view>
    </view>
		
		<uni-popup ref="popupGroup">
			<view class="bg-white rounded-30 overflow-hidden u-p-b-30" style="width: 700rpx;">
				<view class="flex flex-row align-center justify-center u-m-y-30">
					<text class="font-30 font-weight-bold ">更多可参与的团</text>
				</view>
				<scroll-view class="" scroll-y="true" style="height: 600rpx;">
					<view class="u-p-x-30 bg-white" v-if="groupList.length">
						<view class="flex u-p-y-20" v-for="(item,index) in groupList" :key="index">
							<image :src="item.avatar" style="width: 80rpx; height: 80rpx; border-radius: 10rpx;"></image>
							<view class="flex-1 flex align-center justify-between u-p-l-20">
								<view class="flex flex-column">
									<text class="font-26">团长：{{item.nickname}}</text>
									<text class="u-m-t-10 font-24 text-greey">{{item.createtime}} 开团</text>
								</view>
								<view class="flex align-center">
									<text class="u-p-r-10 font-24">还差{{item.gap_num}}人</text>
									<view class="text-center bg-warning rounded-5" style="width: 100rpx; height: 50rpx;line-height: 50rpx;" @click="toBuy(item.groups_goods_id, item.id)">
										<text class="font-24 text-center text-white"  style="line-height: 50rpx;">参团</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	
		<uni-popup ref="popup"> 
			<view class="bg-white u-p-30 rounded-30" style="width: 600rpx;">
				<scroll-view class="" scroll-y="true" style="height: 600rpx;">
					<!-- <u-parse class="" :html="pt_content" style="overflow:hidden;"  :tag-style="{ img: 'display: block'}"/>-->
					<view class="text-center">
						<text class="text-center font-30">拼团规则</text>
					</view>
					<u-parse :html="pt_content" style="overflow:hidden;" :tag-style="{ img: 'display: block'}"/>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
	
</template>

<script>
	import { MineCenterApi } from '@/api/serves.js'
	export default {
		name: 'group-detail-base-info',
		props: {
			groupTotal: {
				type: [Number, String],
				default: ''
			},
			groupList: {
				type: Array,
				default() {
					return []
				}
			}
		},
		data() {
			return {
				pt_content: ''
			}
		},
		created() {
			this.getConfig()
		},
		methods: {
			// 拼团规则
			getConfig() {
				MineCenterApi.getConfig().then(res=> {
					console.log('拼团规则', res);
					if(res.code == 1){
						this.pt_content = res.data.data.pt_content
					}else {
						this.$u.toast(res.msg)
					}
				})
			},
			toBuy(groupId, teamId) {
				let str = `?groups_goods_id=${groupId}&groups_team_id=${teamId}`
				uni.navigateTo({
					url: '/pages/group/groupOrderAdd/groupOrderAdd' + str
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
